@import "@common/styles/index.scss";

.wrapper {
  box-sizing: content-box;

  &.not-bottom {
    height: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .list {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  &.with-bottom {
    height: calc(100% - 64px);
    padding-bottom: 64px;
    padding-bottom: calc(64px + constant(safe-area-inset-bottom));
    padding-bottom: calc(64px + env(safe-area-inset-bottom));

    .list {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  :global {
    .dzq-pull-refresh__loading {
      padding: 0;
      font-size: $font-size-middle;
      top: 0 !important;
    }

    .dzq-pull-refresh__list {
      height: 100% !important;
    }
  }

  &.with-bottom {
    :global {
      .dzq-pull-refresh__loading {
        top: -40px !important;
      }
    }
  }

  .list {
    height: 100% !important;
  }
}

.slider {
  background: $white;

  .slider__inner {
    width: 100%;
    overflow: hidden;
  }

  .slider-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background: $white;
    transition: all 0.4s;
    -webkit-tap-highlight-color: transparent;

    .slider-content {
      flex: 1 0 100%;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      transition: all 0.5s;
    }

    .slider-btn {
      flex: 0 0 74px;
      align-items: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: $font-size-primary;
      letter-spacing: 1px;
      .icon {
        margin-bottom: $margin-10;
      }
    }
  }
}
